<script setup>
import { computed, ref } from "vue";
import { useUiStore } from "stores/ui";

const props = defineProps({
  appList: { type: Array, default: () => [] },
});

const list = computed(() => props.appList.filter((item) => !item.isHidden));

const slide = ref(1);
const ui = useUiStore();
</script>

<template>
  <q-carousel
    v-model="slide"
    transition-prev="slide-right"
    transition-next="slide-left"
    :control-color="ui.isDark ? 'white' : 'accent'"
    swipeable
    animated
    padding
    :arrows="list.length > 8"
    class="bg-transparent"
  >
    <!--遍历功能列表，每8个功能为一页，进行分页显示-->
    <q-carousel-slide
      v-for="n in Math.ceil(list.length / 8)"
      :key="n"
      :name="n"
    >
      <!--个遍历-->
      <div
        class="card-block flex"
        v-for="item in list.slice((n - 1) * 8, n * 8)"
        v-bind:key="item.link"
      >
        <q-btn
          no-caps
          class="card-btn"
          :class="ui.isDark ? ui.cardClass : 'text-accent bg-white'"
          push
          @click="$router.push(item.link)"
        >
          <div class="items-center content-center q-gutter-xs">
            <q-icon
              :size="$q.screen.gt.sm ? '8rem' : '6rem'"
              :name="item.icon"
            />
            <p class="text-h5 text-space text-bold">{{ item.title }}</p>
          </div>
        </q-btn>
      </div>
    </q-carousel-slide>
  </q-carousel>
</template>

<style lang="scss" scoped>
@media screen and (orientation: landscape) {
  .card-block {
    width: 25%;
    height: 50%;
    float: left;
  }
  .card-btn {
    width: 85%;
    height: 85%;
    margin: auto;
  }
}

@media screen and (orientation: portrait) {
  .card-block {
    width: 50%;
    height: 25%;
    float: left;
  }
  .card-btn {
    width: 85%;
    height: 85%;
    margin: auto;
  }
}
</style>
